<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>        

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery/jquery-3.4.1.js"></script>
<link href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css" rel="stylesheet" >
<div class="container">
	<!-- 查询条件 -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">规格管理</a>
	
	  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
	    <form class="form-inline my-2 my-lg-0" id="queryForm">
	       <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="toAdd()">添加</button>
	    </form>
	  </div>
	</nav>
	


	<table class="table">
		<tr>
			<td>id</td>
			<td>名称</td>
			<td>规格选项</td>
			<td>操作</td>
		</tr>
		<c:forEach items="${pageInfo.list}" var="b">
			<tr>
				<td>${b.id}</td>
				<td>${b.specName}</td>
				<td>
					<c:forEach items="${b.options}" var="o">
						${o.optionName}&nbsp;&nbsp; 
					</c:forEach>
				</td>
				<td>
					<button type="button" class="btn btn-primary" onclick="update(${b.id})">修改</button>
				<button type="button" class="btn btn-danger"  onclick="del(${b.id})">删除</button>
				</td>
			</tr>
		</c:forEach>
		
	</table>
	<nav aria-label="...">
	  <ul class="pagination">
	    
	    <li class="page-item disabled">
	      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上页</a>
	    </li>
	    <c:forEach begin="1" end="${pageInfo.pages}" var="p">
	    
	    	<!-- 不同， 非当前页码-->
	    	<c:if test="${pageInfo.pageNum!=p}">
	   			<li class="page-item"><a class="page-link" href="javascript:goPage(${p})">${p}</a></li>
	   		</c:if>
	   		
	   		<!-- 相同 则表示的是当前页码 -->
	   		<c:if test="${pageInfo.pageNum==p}">
	   			<li class="page-item active" aria-current="page">
	      			<a class="page-link" href="javascript:goPage(${p})">${p}<span class="sr-only">(current)</span></a>
	    		</li>
	   		</c:if>
	    </c:forEach>  
	    
	    <li class="page-item">
	      <a class="page-link" href="#">下页</a>
	    </li>
	  </ul>
	</nav>
</div>
<script type="text/javascript">
	function goPage(page){
		$("#page").val(page)//设置要跳转的页面
		$("#workContent").load("../spec/list",$("#queryForm").serialize(),function(){
			alert("刷新成功")
		})
	}
	
	function toAdd(){
		$("#workContent").load("../spec/toadd")
	}
	//修改
	function update(id){
		$("#workContent").load("../spec/toupdate?id="+id)
	}
	//删除
	function del(id){
		if(confirm("确认删除该数据么？")){
			var ids = new Array();
			ids.push(id);
			$.post("../spec/delbatch",{ids:ids},function(data){
				if(data.code==0){
					alert("删除成功")
					// 刷新
					//goPage(1);// 直接跳转到第一页 并且条件不改变
					
					// //要求页面不能跳转，条件也不能改变
						goPage("${pageInfo.pageNum}");
				}else{
					alert("删除失败")
				}
			})
		}
	}
</script>
